<template>
  <div>
    <div>
      <mt-header :title="ordername" style="background: linear-gradient(#000000, #035838);">
        <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
      </mt-header>
    </div>
    <div v-if="this.datasize != 0" class="loadmore" ref="wrapper">
      <mt-loadmore :auto-fill="false" @top-status-change="handleTopChange" :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" ref="loadmore">
        <div class="page-loadmore-list">
          <div v-for="(item) in ddlist" class="info-show" :key="item.ddid">
            <div v-if="item.ddlx === 'menpiao'">
              <div class="div-title">
                <div class="div-title-left-child">{{item.dpmc}}</div>
                <div v-if="item.ddzt[0].yqx === '已取消' " class="div-title-right-child" v-bind:id='state+item.ddhm'>{{item.ddzt[0].yqx}}</div>
                <div v-if="item.ddzt[0].ytj === '已提交' " class="div-title-right-child" v-bind:id='state+item.ddhm'>{{item.ddzt[0].ytj}}</div>
              </div>
              <div class="div-body" v-for="(itemchild)  in item.ddxx" :key="itemchild.ddid" @click="goTicketorderdetil(item.ddhm)">
                <div class="div-body-img">
                  <img src="../../assets/images/photo/test.jpeg" class="h">
                </div>
                <div class="div-body-spmc">
                  {{itemchild.spmc}}
                </div>
                <div class="div-body-spdj">
                  <span style="color:#888;">{{itemchild.spsl}}</span> ×
                  <span style="color:black;">{{itemchild.spdj}}</span>
                </div>
              </div>
              <div class="div-bottom">
                <div class="div-zongjia">
                  合计：
                  <span>¥&nbsp;&nbsp;</span>
                  <span style="color:black;">{{item.ddzj}}</span>
                </div>
              </div>
              <div v-if="item.ddzt[0].yqx != '已取消' ">
                <com-cancelbutton :ddhm='item.ddhm' @ddhmfalg='changestate'></com-cancelbutton>
                <com-paybutton :ddhm='item.zfbh' v-bind:id='pay+item.ddhm'></com-paybutton>
              </div>
            </div>
            <div style="clear: both;"></div>
          </div>
        </div>
        <div slot="top" class="mint-loadmore-top">
          <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>
          <span v-show="topStatus === 'loading'">
            <mt-spinner type="fading-circle"></mt-spinner>
          </span>
        </div>
        <div slot="bottom" class="mint-loadmore-bottom">
          <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
          <span v-show="bottomStatus === 'loading'">
            <mt-spinner type="fading-circle"></mt-spinner>
          </span>
        </div>
      </mt-loadmore>
    </div>
    <div v-if="this.datasize  === 0" class="loadmore" style="background-color:#eee" ref="wrapper">
      <div style="text-align:center;padding-top:10%;">
        <img src="../../assets/images/tool/zwdd.png">
      </div>
      <div style="text-align:center;padding-top:10%;font-size:20px">
        <span style="fon">您还没有相关订单信息 </span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
import { Loadmore } from "mint-ui";
import { MessageBox } from "mint-ui";
import Cancelbutton from "../../common/vue/Cancel-button";
import Paybutton from "../../common/vue/Pay-button";
export default {
  components: {
    comCancelbutton: Cancelbutton,
    comPaybutton: Paybutton
  },
  data() {
    return {
      sxtj: this.$route.query.rq,
      ordername: "",
      datasize: "",
      pages: 1,
      ddlist: [],
      topStatus: "",
      wrapperHeight: 0,
      translate: 0,
      moveTranslate: 0,
      allLoaded: false,
      bottomStatus: "",
      state: "state",
      pay: "pay"
    };
  },
  created() {
    // console.group("created 创建完毕状态===============》");
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
    this.$store.dispatch("showTabbar", { boolean: "1" });
  },
  mounted() {
    //console.group("mounted 挂载结束状态===============》");
    this.getOrderlist();
  },
  methods: {
    goBack() {
      this.$store.dispatch("showTabbar", { boolean: "0" });
      history.go(-1);
    },
    changestate(ddhm) {
      $("#state" + ddhm).html("已取消");
      $("div").remove("#pay" + ddhm);
    },
    getOrderlist() {
      if (this.sxtj === "qqdd") {
        this.ordername = "我的订单";
      } else if (this.sxtj === "ytj") {
        this.ordername = "已提交订单";
      } else if (this.sxtj === "yzf") {
        this.ordername = "已支付订单";
      } else if (this.sxtj === "ywc") {
        this.ordername = "已完成订单";
      } else if (this.sxtj === "yqx") {
        this.ordername = "已取消订单";
      } else if (this.sxtj === "ytd") {
        this.ordername = "已退款订单";
      }
      let global_members_id = JSON.parse(
        localStorage.getItem("global_members_id")
      );
      axios({
        method: "post",
        url: "/api/My/Order/list.htm",
        params: {
          id: global_members_id,
          lxsuserid: "",
          pages: this.pages,
          sxtj: this.sxtj
        }
      }).then(res => {
        res = res.data;
        if (res.zt === "true") {
          console.log(res);
          this.ddlist = this.ddlist.concat(res.data);
          this.datasize = this.ddlist.length;
        } else {
          Indicator.close();
          let instance = Toast({
            message: "加载失败"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      });
    },
    getpageorderlist() {
      this.pages = this.pages + 1;
      this.getOrderlist();
    },
    handleTopChange(status) {
      this.moveTranslate = 1;
      this.topStatus = status;
    },
    changeeditebutton() {
      this.editflage = false;
      this.completeflage = true;
    },
    handleBottomChange(status) {
      this.bottomStatus = status;
    },
    loadBottom() {
      setTimeout(() => {
        this.getpageorderlist();
      }, 150);
    },
    goTicketorderdetil(ddhm) {
      console.log(ddhm);
      this.$router.push({
        path: "/ticketorderdetil",
        query: { rq: ddhm, ordertype: "ticket" }
      });
    }
  }
};
</script>
<style scoped>
.child-view {
  height: 100%;
  overflow: hidden;
}
.loadmore {
  overflow: scroll;
  height: calc(100%);
}
.info-show {
  border-top: 10px solid #eeeeee;
}
.div-title {
  overflow: hidden;
  padding-bottom: 2%;
  padding-top: 2%;
  border-bottom: 1px solid #eee;
}
.div-title-left-child {
  float: left;
  padding-left: 15px;
}
.div-title-right-child {
  float: right;
  padding-right: 15px;
}
.div-body {
  overflow: hidden;
  background-color: #fafafa;
  padding-top: 2%;
  padding-bottom: 2%;
  border-bottom: 1px solid #eee;
}
.div-body-img {
  float: left;
  padding-left: 15px;
  width: 20%;
  height: 90px;
}
.div-body-img > img {
  width: 60px;
  height: 60px;
}

.div-body-spmc {
  float: left;
  width: 40%;
  padding-left: 15px;
}
.div-body-spdj {
  float: right;
  width: 20%;
}
.div-bottom {
  overflow: hidden;
  padding-bottom: 2%;
  padding-top: 2%;
  border-bottom: 1px solid #eee;
}
.div-zongjia {
  float: right;
  padding-right: 15px;
}
.div-button-delete {
  float: right;
  padding-right: 15px;
  height: 30px;
}
.img-zwdd {
  text-align: center;
}
</style>
